<template>
  <cl-dialog title="上传付款凭证" width="450px" :visible.sync="visible" :before-close="beforeClose" @close="close" :props="{
    top: '10vh',
    appendToBody: true,
    closeOnClickModal: false
  }">
    <el-form ref="form" :model="form" label-position="top" :disabled="saving">
      <el-form-item label="图片凭证" prop="images" :rules="[{ required: true, message: '请上传图片凭证' }]">
        <cl-upload :multiple="true" :limit="5" :limitSize="5" list-type="picture-card"
          @change="(val => form.images = val)" v-model="form.images" />
      </el-form-item>
      <el-form-item style="width: 100%;" label="备注">
        <el-input v-model="form.remark"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">关闭</el-button>
      <el-button type="primary" @click="submit" :loading="saving">确定</el-button>
    </template>
  </cl-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      saving: false,
      form: {
        images: '',
        remark: "",
      },

    };
  },
  methods: {
    open(data = {}) {
      this.visible = true;
      this.form.id = data.id;
      this.form.images=data.images.join(',');
      this.form.remark = data.remark;
    },
    submit() {
      console.log(this.form, 'form');

      this.$refs.form.validate(async (valid, errors) => {
        if (!valid) return;
        try {
          this.saving = true;
          let params = { id: this.form.id, remark: this.form.remark, images: this.form.images.split(',') };
          await this.$service.reconciliation.closedPaid(params);
          this.$message.success("操作成功");
          this.$emit("successed");
          this.saving = false;
          this.close();
        } catch (error) {
          this.saving = false;
        }
      });
    },
    beforeClose(done) {
      if (this.saving) return;
      done();
    },
    close() {
      if (this.saving) return;
      this.visible = false;
      this.reset();
    },
    reset() {
      this.saving = false;
      this.$refs.form.resetFields();
      this.form.remark = ""
    }
    //获取人员
  }
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-radio {
    margin-bottom: 10px !important;
  }
}
</style>
